<template>
	<div class="right-station-info" :style="{'height': carouselHeight}" ref="deviceContent">

		<Head title="周边设备">
			<template #content>
				<!-- <el-scrollbar > -->
				<div class="peripheral-box" v-if="prop.data && prop.data.length > 0">
					<el-carousel :autoplay="data.autoplay" :interval="5000" arrow="never" indicator-position="none"
						direction="vertical" class="carousel-box" :style="{'height': carouselHeight}">
						<el-carousel-item v-for="pageItem in Math.ceil(prop.data.length / 5)" :key="pageItem">
							<div class="equipment-item"
								v-for="(item, index) in prop.data.slice((pageItem -1) * 5, pageItem * 5)" :key="index"
								@click="changeEquipment(item)">
								<div class="left-content">
									<div v-if="item.deviceType=='1'" class="iconfont icon-bianyaqiyunhangpingjia"></div>
									<div v-if="item.deviceType=='2'" class="iconfont icon-nibianqi"></div>
									<div v-if="item.deviceType=='3'" class="iconfont icon-chunengxitong"></div>
									<div v-if="item.deviceType=='4'" class="iconfont icon-ziyuan1"></div>
									<div v-if="item.deviceType=='5'" class="iconfont icon-zhaomingxitong"></div>
									<div v-if="item.deviceType=='6'" class="iconfont icon-putongjiankongshebei"></div>

									<div>{{ (item.deviceTypeDes) }}</div>
								</div>
								<div class="right-content">
									<div class="row-info">
										<span class="label">设备编号</span>
										<span class="value text-line">{{ item.deviceNum || '--' }}</span>
									</div>
									<div class="row-info">
										<span class="label">设备名称</span>
										<span class="value text-line">{{ item.deviceName || '--' }}</span>
									</div>
									<div class="row-info">
										<span class="label">状态</span>
										<span class="value">{{ item.deviceStatus == '0' ? '在线' : '离线' }}</span>
									</div>
								</div>
							</div>
						</el-carousel-item>
					</el-carousel>

				</div>

				<div v-else class="no-data">当前场站未绑定周边设备</div>
				<!-- </el-scrollbar> -->

			</template>
		</Head>
		<el-drawer title="设备信息" v-model="data.drawer" direction="rtl" @close="handleDrawerClose"
			class="custom-drawer-info-box">
			<el-scrollbar class="dialog-scroll-wrap">
				<template v-if="data.currentDeviceType!=6">
					<div class="time-box" v-for="(item, index) in data.currentDetailForm" :key="index">
						<div class="label">{{ item.label }}</div>
						<div class="value">{{ (item.dic ? getLabel(item) : data.detailData[item.prop] || '--') }}</div>
					</div>
				</template>
				<template v-else>
					<div class="">
						<div class="time-box">
							<div class="label">视频URL</div>
							<div class="value">{{ data.detailForm6.monitorUrl || '--' }}</div>
						</div>
						<div class="time-box">
							<div class="label">归属电站</div>
							<div class="value">{{ data.detailForm6.stationName || '--' }}</div>
						</div>
						<div class="time-box">
							<div class="label">运营商</div>
							<div class="value">{{ data.detailForm6.operator || '--' }}</div>
						</div>
					</div>
				</template>
			</el-scrollbar>
		</el-drawer>
	</div>
</template>
<script lang="ts" setup>
	import Head from "@/components/head/index.vue";
	import { selectDeviceRealTimeData } from "@/service/apis/pile";
	import { queryDicByParent } from "@/service/apis/api";
	import { ref, onMounted } from 'vue';

	interface Props {
		data : any;
	}
	const prop = withDefaults(defineProps<Props>(), {
		data: () => { },
	});

	const carouselHeight = ref('400px');
	const deviceContent = ref();

	queryDicByParent({
		listDtos: ["peripheralStatus"],
	}).then((res : any) => {
		if (res) {
			data.detailForm1[3].dic = res.peripheralStatus;
			data.detailForm2[3].dic = res.peripheralStatus;
			data.detailForm3[3].dic = res.peripheralStatus;
			data.detailForm4[3].dic = res.peripheralStatus;
			data.detailForm5[3].dic = res.peripheralStatus;
		}
	});

	const data = reactive({
		drawer: false,
		detailData: {} as any,
		autoplay: true,
		currentDeviceType: "1",
		currentDetailForm: [] as any,
		detailForm1: [
			{
				label: "上送时间",
				prop: "endTime",
			},
			{
				label: "网关编号",
				prop: "gateWayNum",
			},
			{
				label: "变压器编号",
				prop: "deviceNum",
			},
			{
				label: "状态",
				prop: "deviceStatus",
				dic: [] as any,
			},
			{
				label: "高压侧A相电压",
				prop: "voltageAHigh",
			},
			{
				label: "高压侧B相电压",
				prop: "voltageBHigh",
			},
			{
				label: "高压侧C相电压",
				prop: "voltageCHigh",
			},
			{
				label: "高压侧AB线电压",
				prop: "voltageABHigh",
			},
			{
				label: "高压侧BC线电压",
				prop: "voltageBCHigh",
			},
			{
				label: "高压侧CA线电压",
				prop: "voltageCAHigh",
			},
			{
				label: "高压侧A相电流",
				prop: "currentAHigh",
			},
			{
				label: "高压侧B相电流",
				prop: "currentBHigh",
			},
			{
				label: "高压侧C相电流",
				prop: "currentCHigh",
			},
			{
				label: "高压侧A相温度",
				prop: "temperatureAHigh",
			},
			{
				label: "高压侧B相温度",
				prop: "temperatureBHigh",
			},
			{
				label: "高压侧C相温度",
				prop: "temperatureCHigh",
			},
			{
				label: "低压侧A相电压",
				prop: "voltageALow",
			},
			{
				label: "低压侧B相电压",
				prop: "voltageBLow",
			},
			{
				label: "低压侧C相电压",
				prop: "voltageCLow",
			},
			{
				label: "低压侧AB线电压",
				prop: "voltageABLow",
			},
			{
				label: "低压侧BC线电压",
				prop: "voltageBCLow",
			},
			{
				label: "低压侧CA线电压",
				prop: "voltageCALow",
			},
			{
				label: "低压侧A相电流",
				prop: "currentALow",
			},
			{
				label: "低压侧B相电流",
				prop: "currentBLow",
			},
			{
				label: "低压侧C相电流",
				prop: "currentCLow",
			},
			{
				label: "低压侧A相温度",
				prop: "temperatureALow",
			},
			{
				label: "低压侧B相温度",
				prop: "temperatureBLow",
			},
			{
				label: "低压侧C相温度",
				prop: "temperatureCLow",
			},
			{
				label: "A相电流畸变率",
				prop: "currentDistortionA",
			},
			{
				label: "B相电流畸变率",
				prop: "currentDistortionB",
			},
			{
				label: "C相电流畸变率",
				prop: "currentDistortionC",
			},
			{
				label: "A相电压畸变率",
				prop: "voltageDistortionA",
			},
			{
				label: "B相电压畸变率",
				prop: "voltageDistortionB",
			},
			{
				label: "C相电压畸变率",
				prop: "voltageDistortionC",
			},
			{
				label: "频率",
				prop: "frequency",
			},
			{
				label: "功率因数",
				prop: "powerFactor",
			},
			{
				label: "当前有功功率",
				prop: "activePower",
			},
			{
				label: "当前无功功率",
				prop: "reactivePower",
			},
			{
				label: "当前视在功率",
				prop: "apparentPower",
			},

			{
				label: "有功电能总数",
				prop: "activeEnergy",
			},
			{
				label: "无功电能总数",
				prop: "reactiveEnergy",
			},
			{
				label: "反向有功电能总数",
				prop: "reverseActiveEnergy",
			},
			{
				label: "故障代码",
				prop: "faultCode",
				template: (row : any, index : number) => {
					return String(row.faultCode) || "--";
				},
			},
		] as any, // 变压器字段
		detailForm2: [
			{
				label: "上送时间",
				prop: "endTime",
			},
			{
				label: "网关编号",
				prop: "gateWayNum",
			},
			{
				label: "逆变器编号",
				prop: "deviceNum",
			},
			{
				label: "状态",
				prop: "deviceStatus",
				dic: [] as any,
			},
			{
				label: "A相电压",
				prop: "voltageA",
			},
			{
				label: "B相电压",
				prop: "voltageB",
			},
			{
				label: "C相电压",
				prop: "voltageC",
			},
			{
				label: "AB线电压",
				prop: "voltageAB",
			},
			{
				label: "BC线电压",
				prop: "voltageBC",
			},
			{
				label: "CA线电压",
				prop: "voltageCA",
			},
			{
				label: "A相电流",
				prop: "currentA",
			},
			{
				label: "B相电流",
				prop: "currentB",
			},
			{
				label: "C相电流",
				prop: "currentC",
			},
			{
				label: "A相温度",
				prop: "temperatureA",
			},
			{
				label: "B相温度",
				prop: "temperatureB",
			},
			{
				label: "C相温度",
				prop: "temperatureC",
			},
			{
				label: "A相电流畸变率",
				prop: "currentDistortionA",
			},
			{
				label: "B相电流畸变率",
				prop: "currentDistortionB",
			},
			{
				label: "C相电流畸变率",
				prop: "currentDistortionC",
			},
			{
				label: "A相电压畸变率",
				prop: "voltageDistortionA",
				unit: "kW",
			},
			{
				label: "B相电压畸变率",
				prop: "voltageDistortionB",
			},
			{
				label: "C相电压畸变率",
				prop: "voltageDistortionC",
			},
			{
				label: "频率",
				prop: "frequency",
			},
			{
				label: "功率因数",
				prop: "powerFactor",
			},
			{
				label: "当前有功功率",
				prop: "activePower",
			},
			{
				label: "当前无功功率",
				prop: "reactivePower",
			},
			{
				label: "当前视在功率",
				prop: "apparentPower",
			},
			{
				label: "当日有功电能总数",
				prop: "activeEnergy",
			},
			{
				label: "当日无功电能总数",
				prop: "reactiveEnergy",
			},
			{
				label: "当日反向有功电能总数",
				prop: "reverseActiveEnergy",
			},
			{
				label: "故障代码",
				prop: "faultCode",
				template: (row : any, index : number) => {
					return String(row.faultCode) || "--";
				},
			},
		] as any, // 逆变器字段
		detailForm3: [
			{
				label: "上送时间",
				prop: "endTime",
			},
			{
				label: "网关编号",
				prop: "gateWayNum",
			},
			{
				label: "储物柜编号",
				prop: "deviceNum",
			},
			{
				label: "状态",
				prop: "deviceStatus",
				dic: [] as any,
			},
			{
				label: "A相电压",
				prop: "voltageA",
			},
			{
				label: "B相电压",
				prop: "voltageB",
			},
			{
				label: "C相电压",
				prop: "voltageC",
			},
			{
				label: "AB线电压",
				prop: "voltageAB",
			},
			{
				label: "BC线电压",
				prop: "voltageBC",
			},
			{
				label: "CA线电压",
				prop: "voltageCA",
			},
			{
				label: "A相电流",
				prop: "currentA",
			},
			{
				label: "B相电流",
				prop: "currentB",
			},
			{
				label: "C相电流",
				prop: "currentC",
			},
			{
				label: "A相温度",
				prop: "temperatureA",
			},
			{
				label: "B相温度",
				prop: "temperatureB",
			},
			{
				label: "C相温度",
				prop: "temperatureC",
			},
			{
				label: "A相电流畸变率",
				prop: "currentDistortionA",
			},
			{
				label: "B相电流畸变率",
				prop: "currentDistortionB",
			},
			{
				label: "C相电流畸变率",
				prop: "currentDistortionC",
			},
			{
				label: "A相电压畸变率",
				prop: "voltageDistortionA",
				unit: "kW",
			},
			{
				label: "B相电压畸变率",
				prop: "voltageDistortionB",
			},
			{
				label: "C相电压畸变率",
				prop: "voltageDistortionC",
			},
			{
				label: "柜内温度 1",
				prop: "cabinetTemperature1",
			},
			{
				label: "柜内温度 2",
				prop: "cabinetTemperature2",
			},
			{
				label: "柜内温度 3",
				prop: "cabinetTemperature3",
			},
			{
				label: "频率",
				prop: "frequency",
			},
			{
				label: "储能额定容量",
				prop: "ratedCapacity",
			},
			{
				label: "已储电量",
				prop: "storageCapacity",
			},
			{
				label: "充放电状态",
				prop: "dischargingStatus", // 充放电状态 1：充电、4：放电、2：待机
				dic: [
					{
						label: "充电",
						value: "1",
					},
					{
						label: "待机",
						value: "2",
					},
					{
						label: "放电",
						value: "4",
					},
				] as any,
			},
			{
				label: "故障代码",
				prop: "faultCode",
				template: (row : any, index : number) => {
					return String(row.faultCode) || "--";
				},
			},
		] as any, // 逆变器字段
		detailForm4: [
			{
				label: "上送时间",
				prop: "endTime",
			},
			{
				label: "网关编号",
				prop: "gateWayNum",
			},
			{
				label: "换电设备编号",
				prop: "deviceNum",
			},
			{
				label: "状态",
				prop: "deviceStatus",
				dic: [] as any,
			},
			{
				label: "A相电压",
				prop: "voltageA",
			},
			{
				label: "B相电压",
				prop: "voltageB",
			},
			{
				label: "C相电压",
				prop: "voltageC",
			},
			{
				label: "AB线电压",
				prop: "voltageAB",
			},
			{
				label: "BC线电压",
				prop: "voltageBC",
			},
			{
				label: "CA线电压",
				prop: "voltageCA",
			},
			{
				label: "A相电流",
				prop: "currentA",
			},
			{
				label: "B相电流",
				prop: "currentB",
			},
			{
				label: "C相电流",
				prop: "currentC",
			},
			{
				label: "A相温度",
				prop: "temperatureA",
			},
			{
				label: "B相温度",
				prop: "temperatureB",
			},
			{
				label: "C相温度",
				prop: "temperatureC",
			},
			{
				label: "A相电流畸变率",
				prop: "currentDistortionA",
			},
			{
				label: "B相电流畸变率",
				prop: "currentDistortionB",
			},
			{
				label: "C相电流畸变率",
				prop: "currentDistortionC",
			},
			{
				label: "A相电压畸变率",
				prop: "voltageDistortionA",
				unit: "kW",
			},
			{
				label: "B相电压畸变率",
				prop: "voltageDistortionB",
			},
			{
				label: "C相电压畸变率",
				prop: "voltageDistortionC",
			},
			{
				label: "频率",
				prop: "frequency",
			},
			{
				label: "功率因数",
				prop: "powerFactor",
			},
			{
				label: "当前有功功率",
				prop: "activePower",
			},
			{
				label: "当前无功功率",
				prop: "reactivePower",
			},
			{
				label: "当前视在功率",
				prop: "apparentPower",
			},
			{
				label: "有功电能总数",
				prop: "activeEnergy",
			},
			{
				label: "无功电能总数",
				prop: "reactiveEnergy",
			},
			{
				label: "反向有功电能总数",
				prop: "reverseActiveEnergy",
			},
			{
				label: "故障代码",
				prop: "faultCode",
				template: (row : any, index : number) => {
					return String(row.faultCode) || "--";
				},
			},
		] as any, // 换电系统字段
		detailForm5: [
			{
				label: "上送时间",
				prop: "endTime",
			},
			{
				label: "网关编号",
				prop: "gateWayNum",
			},
			{
				label: "灯头编号",
				prop: "deviceNum",
			},
			{
				label: "状态",
				prop: "deviceStatus",
				dic: [] as any,
			},
			{
				label: "灯亮状态",
				prop: "lightUpStatus", // 亮灯状态 0：关灯、1：开灯
				dic: [
					{
						label: "关灯",
						value: "0",
					},
					{
						label: "开灯",
						value: "1",
					},
				] as any,
			},
			{
				label: "亮度情况",
				prop: "luminance",
			},
			{
				label: "电压",
				prop: "voltage",
			},
			{
				label: "电流",
				prop: "current",
			},
			{
				label: "功率",
				prop: "power",
			},
			{
				label: "故障代码",
				prop: "faultCode",
				template: (row : any, index : number) => {
					return String(row.faultCode) || "--";
				},
			},
		] as any, // 照明字段
		detailForm6: {} as any, // 视频监控数据
	});

	// 状态匹配
	const getLabel = (column : any) => {
		const obj : any = column.dic.find((item : any) => {
			return item.value == data.detailData[column.prop];
		});
		return obj ? obj.label : "--";
	};

	const changeEquipment = (item : any) => {
		data.currentDetailForm = [];
		data.detailForm6 = {};
		data.detailData = {};

		data.autoplay = false;
		data.currentDeviceType = item.deviceType;
		if (item.deviceType === "1") {
			data.currentDetailForm = data.detailForm1;
		} else if (item.deviceType === "2") {
			data.currentDetailForm = data.detailForm2;
		} else if (item.deviceType === "3") {
			data.currentDetailForm = data.detailForm3;
		} else if (item.deviceType === "4") {
			data.currentDetailForm = data.detailForm4;
		} else if (item.deviceType === "5") {
			data.currentDetailForm = data.detailForm5;
		} else if (item.deviceType === "6") {
			data.detailForm6 = item;
		}
		// 查询最后一贞数据 gateWayNum, deviceNum
		selectDeviceRealTimeData({
			gateWayNum: item.gateWayNum, // "123"
			deviceNum: item.deviceNum,
		}).then((res : any) => {
			// console.log('ooooo2222', res);
			data.drawer = true;
			if (res) {
				data.detailData = res;
			}
		});
	};

	// 抽屉关闭
	const handleDrawerClose = () => {
		data.autoplay = true;
	};

	onMounted(() => {
		nextTick(() => {
			let height = window.innerHeight - deviceContent.value.offsetTop - 24;
			carouselHeight.value = height + 'px';
		})
	});
</script>
<style lang="scss" scoped>
	.right-station-info {
		background: #ffffff;
		border-radius: 12px;

		.no-data {
			font-weight: 500;
			font-size: 16px;
			color: #555555;
			text-align: center;
			margin-top: 120px;
		}

		:deep(.el-carousel__container) {
			height: 90% !important;
		}

		.carousel-item {
			width: 100%;
			display: flex;
			align-content: flex-start;
			flex-wrap: wrap;
		}

		.peripheral-box {
			width: 100%;
			box-sizing: border-box;
			padding: 0 12px;
			height: 100%;

			.equipment-item {
				display: flex;
				align-items: center;
				font-size: 12px;
				color: #262626;
				font-weight: 500;
				width: 100%;
				box-sizing: border-box;
				margin-bottom: 12px;
				border: 1px solid rgba(0, 0, 0, 0.1);
				border-radius: 4px;
				box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.1);
				cursor: pointer;
				padding: 10px 0 14px;
			}

			.left-content {
				padding: 0 12px;
				text-align: center;

				img {
					width: 48px;
					height: 48px;
				}

				.iconfont {
					font-size: 28px;
					color: #5073f7;
					font-weight: 700;
				}
			}

			.right-content {
				width: calc(100% - 90px);

				.row-info {
					font-size: 13px;
					margin-top: 10px;
					display: flex;

					.label {
						text-align: right;
						width: 60px;
						display: inline-block;
						line-height: 1;
					}

					.value {
						font-size: 12px;
						color: #555555;
						font-size: 400;
						width: calc(100% - 60px);
						display: inline-block;
						margin-left: 12px;
						line-height: 1;
					}
				}
			}
		}
	}

	:deep(.el-drawer__header) {
		margin-bottom: 0;
		font-weight: 600;
		color: #262626;
	}

	.custom-drawer-info-box {
		.time-box {
			display: flex;
			font-size: 12px;
			color: #555555;
			font-weight: 500;
			width: 100%;
			margin-bottom: 12px;
			box-sizing: border-box;


			.label {
				color: #262626;
				text-align: right;
				width: 120px;
			}

			.value {
				margin-left: 32px;
				width: calc(100% - 120px - 32px);
			}
		}
	}
</style>